<template>
<rx-dialog :options="config" @close="close" @confirm="confirm" class="m-seal-dialog-box">
    <template v-if="stamps.length === 0">
        <div class="no-data">
            <image src="./noData.png" :alt="i18n('noAnyData','暂无数据')"/>
        </div>
    </template>
    <div class="m-seal-img-box" v-else>
        <template v-for="img of stamps">
            <div class="m-seal-img-item" @click="selectSeal(img)">
                <div class="img-box" :class="{'img-box-active':selected.id === img.id}">
                    <div class="radio-box">
                        <radio :checked="selected.id === img.id" style="transform:scale(0.7)" />
                    </div>
                    <image class="list-img" :src="getImg(img)"/>
                </div>
            </div>
        </template>
    </div>
</rx-dialog>
</template>

<script>
import RxDialog from '@/components/RxDialog.vue';
import FormUtil from "@/js/FormUtil.js"
import Api from "@/api/Api.js";
export default {
    name: "MsealDialog",
    components:{
        RxDialog
    },
    props:{
        dialogClose:{},
    },
    data(){
        return {
            /*头部标题*/
            config: {
                title:this.i18n('selectSeal','选择印章')
            },
            selected:{},
            stamps:[],
            eventName:'',
            category:{},
        }
    },
    onLoad(params) {
        let sealDialog = uni.getStorageSync('MsealDialog')
        this.eventName = sealDialog.eventName;
        let obj = sealDialog.params;
        this.category = obj.category
        this.initSeal()
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        selectSeal(item){
            this.selected = item
        },
        initSeal(){
            let self = this ;
            Api.getStampList(this.category).then(res=>{
                let aryTmp=[];
                let rows=res.data;
                for(let i=0;i<rows.length;i++){
                    let row=rows[i];
                    let fileJson=row.fileJson;
                    if(!fileJson){
                        continue;
                    }
                    let stamp=JSON.parse(fileJson)[0];
                    let fileId=stamp.fileId;

                    let obj={name:row.name,fileId:fileId,x:0,y:0,id:row.id};
                    aryTmp.push(obj);
                }
                self.stamps=aryTmp;
            })
        },
        imgClick(item){
            this.selected=item;
        },
        isChecked(img){
            return this.selected ? this.selected.id==img.id : false;
        },
        getImg(item){
            return  FormUtil.getImagePath(this,item.fileId,false);
        },
        confirm() {
            let data = this.selected ;
            if(!data.fileId){
                return ;
            }
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName, data)
                }
            })
        },
        close() {
            let self = this;
            uni.navigateBack({
                delta: 1,
                success: function () {
                    uni.$emit(self.eventName,'')
                }
            })
        },
    }
}
</script>

<style scoped>

.radio-box{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
}
.radio-box ::v-deep(.uni-radio-input){

}
.no-data{
    margin:10% auto 0;
    max-width: 30%;
}
.no-data image{
    width: 9rem;
    height: 9rem;
    object-fit: cover;
}
.m-seal-dialog-box{
    --ImgCount:3
}
.m-seal-img-box{
    display: grid;
    grid-template-columns: repeat(var(--ImgCount),1fr);
    gap: .4rem;
}
.m-seal-img-item{
    height: 0;
    padding-bottom: 100%;
    position: relative;
}
.img-box{
    position: absolute;
    inset: 0;
    border: 1px solid #ddd;
    border-radius: .4rem;
    height: 100%;
    width: 100%;
}
.img-box.img-box-active{
    border-color: #007aff;
}
.list-img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    border: 0;
    pointer-events: none;
}
.img-box::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}
/*大于1600*/
@media all and (min-width : 1600px){

}
/*大于1200 */
@media all and (min-width : 1200px){

}
/*!*大于992 *!
@media all and (min-width : 992px){

}*/
/*大于768  ipad*/
@media all and (min-width : 768px){
    .m-seal-dialog-box{
        --ImgCount:4
    }
}
/*大于576 - 小于768*/
@media all and (min-width : 576px){

}
/*小于576*/
@media all and (max-width : 576px){

}
</style>
